<template>
  <div class="swiper">
    <swiper :options='swiperOption' ref='mySwiper' class="swiper">
      <swiper-slide v-for='(item, index) in banners' :key='index' class="swiper_item">
        <img :src="item.src" alt="轮播图" class="pic">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
// import { getSwiperList } from '@/api/home.js'
export default {
  data () {
    return {
      swiperOption: {
        // loop: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination'
        }
      },
      banners: []
    }
  },
  created () {
    // 获取轮播图的图片
    this.$api.getSwiperList().then(res => {
      if (res.data.code === 200) {
        this.banners = res.data.bannersList
      }
    })
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  }
}
</script>
<style lang='less'>
.swiper{
  /* height: 150px; */
  width: 100%;
  min-height: 1px;
  img{
    border: none;
    vertical-align: middle;
    width: 100%;
  }
}
.swiper /deep/ .swiper-pagination-bullet-active {
  background-color: #fff;
}
.swiper /deep/ .swiper-pagination-bullets {
  text-align: left;
}
</style>
